import { definePageConfig } from 'ice';
import { Card, Form, Input, Message, Select } from '@alifd/next';
import React, { useState } from 'react';
import { getUser } from '@/utils/user';
import userService, { updateUserType, userType } from '@/services/user';

export const pageConfig = definePageConfig(() => {
  return {
    title: '个人信息',
    auth: ['admin'],
  };
});

// 用户个人信息
const UserInfo: React.FC<any> = () => {
  const [user, setUser] = useState<userType>(getUser() as userType);
  const [isPreview, setIsPreview] = useState(true);
  const onSubmit = (value: updateUserType, errors?: any) => {
    if (!errors) {
      if (value.password == '') value.password = void 0;
      const User = getUser() as userType;
      const newUser = {
        ...value,
        id: User.id,
        status: void 0,
      };
      delete newUser.status;
      // 修改优化信息
      userService.updateMy(newUser).then((data) => {
        if (data.success) {
          localStorage.setItem('user', JSON.stringify({
            ...newUser,
            status: User.status,
          }));
          setUser(getUser() as userType);
          Message.success('保存成功');
        }
      });
      setIsPreview(true);
    }
  };
  return (
    <Form
      isPreview={isPreview}
      onChange={(value: any) => {
        const data = {
          ...value,
          status: { id: value.status },
        } as userType;
        setUser(data);
      }}
    >
      <Card free className="w-full mb-4">
        <Card.Header title="个人信息管理" />
        <Card.Content>
          <Form.Item
            name="status"
            label="身份"
            required
            asterisk={false}
            disabled
          >
            <Select
              className="w-full"
              value={user.status.id}
            >
              <Select.Option value={0}>管理员</Select.Option>
              <Select.Option value={1}>用户</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="name"
            label="昵称"
            required
            asterisk={false}
            maxLength={20}
          >
            <Input placeholder="请输入昵称" value={user.name} />
          </Form.Item>
          <Form.Item name="email" label="邮箱" format="email" required asterisk={false}>
            <Input placeholder="请输入邮箱" value={user.email} />
          </Form.Item>
          {!isPreview &&
            <Form.Item name="password" label="密码" asterisk={false} minLength={6}>
              <Input.Password placeholder="修改密码" />
            </Form.Item>}
          <div className="z-centered" style={{ justifyContent: 'end' }}>
            {!isPreview &&
              <Form.Submit validate className="mr" onClick={onSubmit}>保存</Form.Submit>}
            <Form.Reset
              type="primary"
              onClick={() => {
                setIsPreview(!isPreview);
                setUser(getUser() as userType);
              }}
            >
              {isPreview ? '修改' : '取消'}</Form.Reset>
          </div>
        </Card.Content>
      </Card>
    </Form>);
};
export default UserInfo;
